'use client';

import { useAuth } from '@clerk/nextjs';
import { observer } from 'mobx-react-lite';
import React from 'react';

import { Clip } from '@/state/clipStore';
import { Persona, PersonaMetadata } from '@/state/personaStore';
import { isMobileBrowser } from '@/utils/device';

import DesktopSongPage from './DesktopSongPage';
import MobileSongPage from './MobileSongPage';

type Props = {
  clip: Clip;
  persona?: PersonaMetadata | Persona | null;
  clipHistoryIds?: string[];
  time?: number;
};

const SongPage: React.FC<Props> = observer(
  ({ clip, persona, clipHistoryIds, time }: Props) => {
    const { isSignedIn } = useAuth();
    if (isMobileBrowser() && !isSignedIn) {
      return (
        <MobileSongPage
          clip={clip}
          persona={persona}
          clipHistoryIds={clipHistoryIds}
        />
      );
    } else {
      return (
        <DesktopSongPage
          clip={clip}
          persona={persona}
          clipHistoryIds={clipHistoryIds}
          time={time}
        />
      );
    }
  }
);

export default SongPage;